<!-- <nz-page-header (nzBack)="onBack()" nzBackIcon nzTitle="Users" nzSubtitle="You can manage Users"> </nz-page-header> -->
<button nz-button nzType="primary" (click)="CreateUser()" class="head-action" *ngIf="!PermissionDenied">
  <i nz-icon nzType="user-add" nzTheme="outline"></i>Create User
</button>
<nz-result nzStatus="403" nzTitle="403" nzSubTitle="Sorry, you are not authorized to access this page." *ngIf="PermissionDenied">
  <div nz-result-extra>
    <button nz-button nzType="primary" [routerLink]="['/status']">back</button>
  </div>
</nz-result>
<nz-list class="demo-loadmore-list" [nzDataSource]="users" [nzItemLayout]="'horizontal'" [nzLoading]="loading"
  [nzRenderItem]="item" >
  <ng-template #item let-item >
    <nz-list-item [nzActions]="[editAction, moreAction]" >
      <nz-skeleton [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="loading">
        <ng-template #editAction><a (click)="modify(item)">modify</a></ng-template>
        <ng-template #titleTemplate><h3>{{item}}</h3></ng-template>
        <ng-template #moreAction>
          <a nz-popconfirm *ngIf="item!='root'" nzPopconfirmTitle="Are you sure remove this user?"
            (nzOnConfirm)="RemoveUser(item)">delete</a>
          <a nz-popconfirm *ngIf="item =='root'" nzPopconfirmTitle="After delete root user,server authentication will be disabled, are you sure?"
            (nzOnConfirm)="RemoveUser(item)">delete</a>
        </ng-template>
        <ng-template #avatarTemplate>
          <nz-avatar nzIcon="user"></nz-avatar>
        </ng-template>
        <ng-template #detailTemplate>
          <user-detail username="{{item}}"></user-detail>
        </ng-template>
        <nz-list-item-meta [nzTitle]="titleTemplate" [nzAvatar]="avatarTemplate" [nzDescription]="detailTemplate">
        </nz-list-item-meta>
      </nz-skeleton>
    </nz-list-item>
  </ng-template>
</nz-list>
<nz-modal [(nzVisible)]="isVisible" nzTitle="Create a user" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm" class="login-form">
    <nz-form-item>
      <span class="error">{{errors}}</span>
      <nz-alert *ngIf="validateForm.get('userName').value=='root'" nzType="warning" nzMessage="you are adding root user,authentication will be enabled automatically"></nz-alert>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control nzErrorTip="user name required">
          <input type="text" nz-input formControlName="userName" placeholder="UserName">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control nzErrorTip="password required">
        <input type="text" nz-input formControlName="password" placeholder="password">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="isEdit">
      <user-detail username="{{editUserName}}" [showAllRoles]="true"></user-detail>
    </nz-form-item>
  </form>
</nz-modal>